import React, { Component } from 'react';
// 转发ref
const Child2 = React.forwardRef((props, ref) => {
  return (
    <>
      <h1 ref={ ref }>child2</h1>
    </>
  )
})
class Child1 extends Component {
  state = { count: 10 }

  clickHandler = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render () {
    return (
      <>
       <h1>child1 - {this.state.count}</h1> 
      </>
    )
  }
}

// 1.在严格模式下，不要使用 字符串类型的ref，它已被废弃
// 2.如果在类组件中使用ref，建议使用 createRef
// 3.通过 createRef 创建的 ref 的 current值可以获取到子组件的实例(前提条件是子组件为类组件)
// 4.不可以直接通过ref 获取函数式组件的实例（因为函数式组件没有实例）
class App extends Component {
  child1Ref = React.createRef()
  child2Ref = React.createRef()
  divRef = React.createRef()
  add = () => {
    // console.log(this.refs.child1)
    console.log(this.child1Ref.current.state)
    this.child1Ref.current.clickHandler()
  }
  // 挂载阶段，应该只执行一次，但是此处确打印了2次
  // 检查入口文件处 是否开启了严格模式（这仅适用于开发模式。生产模式下生命周期不会被调用两次。）
  // react 18版本以前没有执行2次之说
  // 如果子组件是函数式组件，调用子组件的时候，添加的ref属性 需要在 定义子组件时通过 React.forwardRef 高阶组件包裹，第二个参数就是传递的ref
  // 这样就可以在父组件中获取到子组件中的 DOM 标签
  componentDidMount () {
    console.log(this.child2Ref)
    console.log(this.divRef.current.innerHTML)
  }
  render() {
    return (
      <div>
        <button onClick={ this.add }>加</button>
        {/* <Child1 ref="child1" /> */}
        <Child1 ref = { this.child1Ref }/>
        <Child2 ref = { this.child2Ref }/>
        {/* ref也可以用在DOM */}
        <div ref = { this.divRef }>ref-DOM</div>
      </div>
    );
  }
}

export default App;